var audioPlayer = $("audio")[0];
var timer = null;
// 音乐文件的数组
var audios = [];
//当前播放音乐文件的下标
var curPlay = 0;
var playButton = $(".play");
//设置音频播放器的初始音量
audioPlayer.volume = 0.5;
var loopType = "顺序";
var showTime = $(".show_time");
showTime.val(0);

function changeNumType(num) {
    return num<10?"0"+num:num;
}

//自动调节窗口大小监听
function autoSize() {
    $("body").css("height",window.innerHeight);
    $(window).resize(function () {
        $("body").css("height",this.innerHeight);
    });
    $(".song_list").css({
        "max-height":(parseInt(window.innerHeight)-200)+"px"
    });
}
//音乐播放控制相关
function audioPlayerControl() {
    audioPlayer.onpause = function () {
        $(".star").removeClass("animation");
        $(".effect_container").css("animation","none")
    };
    audioPlayer.onplay = function () {
        playButton.text("暂停");
        $(".star").addClass("animation");
    };
    audioPlayer.onended = function () {
        $(".star").removeClass("animation");
        $(".effect_container").css("animation","none");
//    下一曲
        console.log("播放完成");

        if (loopType === "顺序"){
            updateAudio(true);
        }
        if(loopType === "随机"){
            curPlay = parseInt(Math.random()*audios.length);
            updateAudio(true);
        }
    };
    audioPlayer.oncanplay = function (event) {
        $(".star").addClass("animation");
        var m = parseInt(this.duration/60);
        var s = parseInt(this.duration%60);
        $(".end_time").text(changeNumType(m)+":"+changeNumType(s));
    };
    audioPlayer.ontimeupdate = function () {
        if ($(".effect_container").css("animation")!=="rotate 20s infinite"){
            $(".effect_container").css("animation","rotate 20s infinite");
        }

        var curStar = parseInt(Math.random()*50);
        var m = parseInt(this.currentTime/60);
        var s = parseInt(this.currentTime%60);
        $(".start_time").text(changeNumType(m)+":"+changeNumType(s));

        //计算出 时间更新时候 滑杆每一步走的距离 一共要走100步
        // 总时长 100
        // 当前    1
        //
        // 当前    50
        //
        // 1/100 = 0.01
        //
        // 50/100 = 0.2
        //
        // 100/100 = 1

        var space = this.currentTime/this.duration;

        $(".show_time").val(space*100);
    };
}
//歌曲列表相关
function songList() {
    $(".close").click(function () {
        $(this).text($(this).text()==="<"?">":"<");
        $(".song_container").css($(this).text()==="<"?{
            width:"300px",
            padding:"50px"
        }:{
            width:"0px",
            padding:"0 0 0 30px"
        });
    });
}

/*
* 更新音乐文件的方法
* isNext
*   true 下一曲
*   false 上一曲
* */
function updateAudio(isNext) {
    if(isNext){
        curPlay++;
        if (curPlay>audios.length-1){
            curPlay = 0;
        }
    }else {
        curPlay--;
        if (curPlay<0){
            curPlay = audios.length-1;
        }
    }
    var audio = audios[curPlay];
    audioPlayer.src = audio.url;
    audioPlayer.play();
    $(".song_name").text("《"+audio.name.replace(".mp3","")+"》");

    var li = $(".song_list li:nth-child("+(curPlay+1)+")");
    li.addClass("active");
    li.siblings().removeClass("active");
}
//控制相关事件
function controlEvents() {
    $(".pre").click(function () {
        updateAudio(false);
    });
    $(".next").click(function () {
        updateAudio(true);
    });
    playButton.click(function () {
        $(this).text()==="暂停"?audioPlayer.pause():audioPlayer.play();
        $(this).text($(this).text()==="暂停"?"播放":"暂停");
    });
    $(".volume_change_container > input").change(function () {
        console.log($(this).val()/100);
        //注意 滑杆的值 是0-100 音量调节是0-1
        audioPlayer.volume = $(this).val()/100;
        if (timer){clearTimeout(timer);timer=null}
        timer = setTimeout(function () {
            $(".volume_change_container > input").css("visibility", "hidden");
        },3000);
    });
    $(".loop_container li").click(function () {
        console.log($(this).text())
        loopType = $(this).text();
        $(".loop_button").text(loopType);

        if (loopType === "单曲"){
            audioPlayer.loop = true;
        }
    });
    $(".volume_change").click(function () {
        var range = $(".volume_change_container > input");
        range.css("visibility", "visible");
    });
    $(".muted").click(function () {

        audioPlayer.muted = $(this).text()==="静音";

        $(this).text($(this).text()==="静音"?"开启":"静音");
    });
}

function createSongList(songs) {
    audios = songs;
    var songContainer = $(".song_list");
    songContainer.empty();
    $(".song_container").css("display","block");
    for (var i=0;i<audios.length;i++){
        var item = $("<li>"+audios[i].name+"</li>");
        songContainer.append(item);
        item.click(function (info) {
            return function () {
                stars();
                //indexOf:通过数组中的元素 获取它的下标
                curPlay = audios.indexOf(info);
                $(".song_name").text("《"+info.name.replace(".mp3","")+"》");
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
                audioPlayer.src = info.url;
                audioPlayer.play();
                //direction 总时长
                // console.log(audioPlayer.direction)
            }
        }(audios[i]));
    }
}
//加载音频的文件
// 拖放到浏览器里面的音频文件
function loadAudioFiles(callback) {
    document.body.ondragover = function (event) {
        event.preventDefault();
    };
    document.body.ondrop = function (event) {
        event.preventDefault();
        var files = event.dataTransfer.files;
        //音频文件的数量
        var num = 0;
        //每次处理完音频之后更新的值（处理音频的进度）
        var curIndex = 0;
        for (var i=0;i<files.length;i++){
            console.log(files[i]);
            var file = files[i];
            if (file.type === "audio/mp3"){
                num++;
            //    是音频 把音频转换为URL 放到 音频数组中
                var reader = new FileReader();
                //在读取为URL的时候 是异步执行
                reader.onload = function (name) {
                    return function () {
                        //需要知道  什么时候 所有的音频文件 都处理完毕
                        // file.name
                        audios.push({name:name,url:this.result});
                        curIndex++;
                        if (curIndex === num){
                            //    已经转换完毕
                            //    创建音乐播放列表
                            callback(audios);
                        }
                    }
                }(file.name);
                reader.readAsDataURL(file);
            }
        }
    };
}

function addStar() {
    var star = $("<img src='star.png' class='star'>");
    var width = Math.random()*50;
    star.css({
        width:width<10?10:width+"px",
        left:Math.random()*window.innerWidth+"px",
        top:Math.random()*150+"px"
    });
    $("body").append(star)
}

function stars() {
    $(".star").remove();
    var num = parseInt(Math.random()*15);
    for (var i=0;i<num;i++){
        addStar();
    }
}

//游戏界面的容器
var gameContainer = document.querySelector(".gameContainer");
//开始游戏的按钮
var starGameButton = document.querySelector(".tools .button");
//倒计时的标签
var timeView = document.querySelector(".time");

//步的标签
var setpView = document.querySelector(".step");

//等级的标签
var lvView = document.querySelector(".tools h1");

//历史纪录的标签
var hView = document.querySelector(".history");

//游戏结束标签
var gameOver = document.querySelector(".game_over");

//等级
var lv = 0;
//当前的步数
var setp = 0;
//倒计时的时间
var time = 60;
//当前的列数
var curS = 2;

var histories = [];
//在读取 历史纪录中的数组
var hisStr = localStorage.getItem("histories");
//如果历史纪录的字符串 存在  就是用 从localStorage中获取的字符串
//不存在 就是用空字符串"" 代替
hisStr = hisStr?hisStr:"";

//把字符串 转为 数组
// histories = hisStr==="" ? []:hisStr.split(",");
if (hisStr===""){
    histories = [];
}else {
    //把字符串 转为 数组
    histories = hisStr.split(",");
}

// "1,2,3,4".split(",")
// "1.2.3.4".split(".")

//创建小方块的函数
function colorView(width,space,color,opacity) {
    var view = document.createElement("div");
    view.style.float = "left";
    view.style.width = width+"px";
    view.style.height = width+"px";
    view.style.backgroundColor = color;
    view.style.opacity = opacity;
    view.style.marginTop = space+"px";
    view.style.marginLeft = space+"px";
    view.style.borderRadius = "5%";
    // view.style.cssText = "float:left;width:"+width+"px;height:"+width+"px;background-color:"+color;
    return view;
}

//游戏界面
//column:列
function gameView(column) {
    //在总共（column*column）的色块 范围之内 随机一个方块的位置
    var num = column*column;
    var index = parseInt(Math.random()*num);
    //随机一个颜色
    var color = "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";

    //总间距的数量
    var allSpace = column+1;

    //平均分的色块宽度
    //色块容器的总宽度600
    var w = 600/column;

    //计算间距-> 平均的宽度 取 一个合适的比例（10%）
    var space = w*0.06;

    //总宽度（600）-所有的间距（space*allSpace） -> 所有色块的宽度
    //单独每一个小色块的宽度 = 所有色块的宽度/列数
    var width = (600-space*allSpace)/column;

    for (var i=0;i<num;i++){

        var view = colorView(width,space,color,i===index?0.8:0.9);
        gameContainer.appendChild(view);
        view.onclick = function () {
            this.style.opacity==0.8?success():fail();
        };
    }
}

starGameButton.onclick = function () {
    if (this.value!=="开始游戏"){
        this.value="开始游戏";
        fail();
        return;
    }
    this.value="结束游戏";
    gameView(curS);

    //刷新游戏的倒计时
    timer = setInterval(function () {
        time--;
        timeView.textContent = "还剩"+time+"秒";
        //游戏时间到 -> 清除定时器 还原时间、步数,清空游戏画面的内容
        if (time<=0){
            fail();
        }
    },1000);
};

//成功
function success() {
    //清空游戏的容器
    gameContainer.innerHTML = "";

    //    重新加载游戏界面
    //    自加减 在前 先运算 后赋值
    //    自加减 在后 先赋值 后运算
    gameView(++curS);
    //++setp 先给自己加1 再去与"步"这个字符串拼接
    setpView.textContent = ++setp+"步";
    //每5步 增加一个等级
    if (setp%5===0){
        lvView.textContent = "等级:" + ++lv;
    }

}
//失败
function fail() {

    //显示游戏结束的提示
    gameOver.style.display = "block";
    starGameButton.disabled = true;
    starGameButton.value="开始游戏";
    var result = "色郎";
    if(lv<=3){result = "色郎";}
    if(lv>3&&lv<=5){result = "色徒";}
    if(lv>5&&lv<=10){result = "色怪";}
    if(lv>10&&lv<=20){result = "色鬼";}
    if(lv>20&&lv<=40){result = "色妖";}
    if(lv>40){result = "色魔";}
    gameOver.textContent = "GAME OVER!";
    gameOver.textContent = gameOver.textContent+result;
    //2秒后消失
    setTimeout(function () {
        gameOver.style.display = "none";
        starGameButton.disabled = false;
    },3000);

    //把分数记录到 数组
    histories.push(lv);
    //把数组 数据持久化 到本地
    localStorage.setItem("histories",histories);

    gameContainer.innerHTML = "";
    //重置当前的步数
    curS = 2;
    setp = 0;
    time = 60;
    clearInterval(timer);
    setpView.textContent = setp+"步";
    timeView.textContent = "还剩"+time+"秒";
    lv = 0;
    lvView.textContent = "等级:" + lv;
}

//主函数
function main() {
    autoSize();
    loadAudioFiles(createSongList);
    audioPlayerControl();
    controlEvents();
    songList();

    $(".find_color").click(function () {
        if ($(this).text()==="找色块啊"){
            $(this).text("不找了~555~");
            $(".game_box").css("display","block");
        }else {
            $(this).text("找色块啊");
            $(".game_box").css("display","none");
        }
    });

    $(".game_box").hover(function () {
        $(".audio_tool_container").css("height","0")
    },function () {
        $(".audio_tool_container").css("height","50px")
    });
}

main();
